<template>
    <!-- 数字滚动组件 -->
    <div class="counter">{{ count }}</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
// const targetNumber = 100; // 指定的目标数字
const duration = 1200; // 动画持续时间，单位为毫秒
const count = ref(0); // 获取数字显示的元素
const props = defineProps(["targetNumber"]);
let startTime = null; // 动画开始时间
function step(timestamp) {
    if (!startTime) startTime = timestamp; // 记录动画开始时间
    const progress = timestamp - startTime; // 计算动画进度
    // 根据动画进度计算当前数字的值
    const currentNumber = Math.round(+props.targetNumber * (progress / duration));
    count.value = currentNumber; // 更新数字显示
    if (progress < duration) {
        // 继续下一帧动画
        requestAnimationFrame(step);
    } else {
        // 动画结束，显示最终数字
        count.value = props.targetNumber;
    }
}
onMounted(() => {
    requestAnimationFrame(step);
});
</script>
<style scoped lang="scss">
.counter {
    font-size: 70px;
    font-weight: 800;
}
</style>
